<template>
  <hr>
   <h1>sum:{{ sum }}</h1>
  <h1>姓名:{{ person.name }}</h1>
  <h1>年龄:{{ person.age }}</h1>
  <h1>薪资:{{ person.job.job1 }}K</h1>
  <button @click="person.name+='~'">修改姓名</button>
 <button @click="person.age++">修改年龄</button>
  <button @click="person.job.job1 ++">修改薪资</button> 
  <button @click="sum ++">求和</button> 




</template>
<script setup lang="ts">

import {reactive,toRef ,toRefs,shallowReactive,shallowRef,ref,readonly,shallowReadonly} from 'vue';
 let person=reactive({
  name:'zs',
  age:12,
  job:{
    job1:14
  }
 })
 person=shallowReadonly(person)
 const sum=ref(0)

</script>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
